<template>
  <div class="app-container">
    <div class="form-container">
      <div class="filter-view">
        <el-form ref="form" label-width="100px">
          <el-form-item label="项目检索">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入项目名称" style="width: 20%; margin-left: 20px;" type="text"
            />
            <el-button class="ml-20" icon="el-icon-search" type="primary" @click="queryProjectPage">
              查询
            </el-button>
          </el-form-item>
          <el-row>
            <el-col :span="16">
              <el-form-item label="项目状态">
                <el-radio-group v-model="queryParams.status" size="small" @change="()=>{
                  queryParams.current=0
                  queryProjectPage()}"
                >
                  <el-radio-button v-for="status in projectStatusList" :key="status.code" :label="status.code">
                    {{ status.name }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button-group>
                  <el-button :type="dataShowType=='card'?'primary':'default'" size="mini"
                             @click="dataShowType='card'"
                  >
                    <font-icon
                      class="fas fa-th-large "
                    />
                  </el-button>
                  <el-button :type="dataShowType=='table'?'primary':'default'" size="mini"
                             @click="dataShowType='table'"
                  >
                    <font-icon
                      class="fas  fa-th-list"
                    />
                  </el-button>
                </el-button-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <form-card-list
        v-if="dataShowType=='card'"
        v-loading="projectListLoading"
        type="share"
        :project-list.sync="projectList"
      />
      <my-form-table
        v-if="dataShowType=='table'"
        v-loading="projectListLoading"
        type="share"
        :project-list.sync="projectList"
        @refresh="queryProjectPage"
      />
      <div class="project-page-view">
        <el-pagination
          v-if="total>10"
          :current-page.sync="queryParams.current"
          :page-size.sync="queryParams.size"
          :total="total"
          background
          layout="total, prev, pager, next"
          @current-change="queryProjectPage"
        />
      </div>
    </div>
  </div>
</template>
<script>
import {getMyCooperationFormsRequest} from "@/api/project/form"
import FormCardList from "../my/card"
import mixin from "../my/mixin"
import MyFormTable from "../my/table"

export default {
  name: 'ShareForm',
  components: {
    MyFormTable,
    FormCardList
  },
  mixins: [mixin],
  data() {
    return {
      dataShowType: 'card',
      total: 0,
      queryParams: {
        current: 1,
        size: 12,
        name: '',
        beginDateTime: null,
        endDateTime: null,
        status: null,
        folderId: 0
      },
      projectListLoading: true,
      projectList: []
    }
  },
  created() {
    this.queryProjectPage()
  },
  methods: {
    queryProjectPage() {
      getMyCooperationFormsRequest(
        this.queryParams
      ).then((res) => {
        let {records, total, size} = res.data
        this.projectList = records
        this.total = total
        this.queryParams.size = size
        this.projectListLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
}

.form-container {
  width: 1280px;
  margin: 0 auto;
}


.project-page-view {
  margin-top: 30px;
  text-align: center;
}

.form-breadcrumb {
  margin: 10px 50px 10px 0px;
}

::v-deep .el-breadcrumb__inner {
  cursor: pointer !important;
}

</style>
